<template>
  <el-container>
    <el-backtop></el-backtop>
    <el-header class="flex justify-evenly mt-5 items-center">
      <div class="w-1/4">
        <strong style="color: rgb(253, 173, 23); font-size: 200%"
          >MEDICINE KNOWNS</strong
        >
      </div>
      <div class="w-1/4 flex h-8">
        <el-input
          type="text"
          v-model="content"
          style="border-color: rgb(231, 179, 82)"
          placeholder="请输入内容进行检索"
        >
          <template #prepend>
            <el-button icon="Search" />
          </template>
          <template #append>
            <el-select
              v-model="searchFlag"
              placeholder="Select"
              style="width: 115px"
            >
              <el-option label="药品名称" value="1" />
              <el-option label="功能主治" value="2" />
              <el-option label="成分组成" value="3" />
            </el-select>
          </template>
        </el-input>
        <el-button
          class="bg-blue-400"
          style="height: 100%"
          type="primary"
          @click="handleSearch"
          ><el-icon> <Search /> </el-icon
        ></el-button>
      </div>
      <!-- <el-link>⏰北京时间：{{ nowTime }}</el-link> -->
      <div class="w-1/6">
        <div class="avatar">
          <img :src="avatar" alt="avatar" />
        </div>
      </div>
    </el-header>
    <el-header style="padding: 0px">
      <el-menu
        class="justify-center"
        mode="horizontal"
        router
        background-color="#FF9933"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <div>
          <el-menu-item index="/all"
            ><i class="el-icon-s-unfold"></i>药品总览</el-menu-item
          >
        </div>
        <div class="grid-content bg-purple">
          <el-menu-item index="/cold"
            ><i class="el-icon-reading"></i>感冒药</el-menu-item
          >
        </div>
        <div class="grid-content bg-purple">
          <el-menu-item index="/stomach"
            ><i class="el-icon-reading"></i>肠胃药</el-menu-item
          >
        </div>
        <div class="grid-content bg-purple">
          <el-menu-item index="/skin"
            ><i class="el-icon-reading"></i>皮肤药</el-menu-item
          >
        </div>
        <div class="grid-content bg-purple">
          <el-menu-item index="/news"
            ><i class="el-icon-reading"></i>新闻资讯</el-menu-item
          >
        </div>
        <div class="grid-content bg-purple">
          <el-menu-item index="8" @click="handleLogin"
            ><u><i class="el-icon-user"></i>登录/注册</u></el-menu-item
          >
        </div>
      </el-menu>
    </el-header>
    <el-main style="background-color: rgb(244, 244, 244); height: 100%">
      <el-container
        style="width: 1100px; margin-left: 200px"
        direction="horizontal"
      >
        <el-main style="background-color: white">
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="(val, index) in imageList" :key="index">
              <el-image
                style="object-fit: fill; width: 100%; height: 100%"
                :src="val"
              />
            </el-carousel-item>
          </el-carousel>
        </el-main>
        <el-card class="box-card" style="width: 40%">
          <div slot="header" class="clearfix">
            <span>最新资讯</span>
            <br />
            <br />
            <el-link
              type="info"
              href="https://www.yaofangwang.com/yongyao/2038139.shtml"
              >三九抗病毒口服液和三九感冒灵颗粒的区别</el-link
            ><br /><br />
            <el-link
              type="info"
              href="https://www.yaofangwang.com/yongyao/2037220.shtml"
              >乐活法生理性海水鼻腔喷雾器囗里面能喷吗</el-link
            ><br /><br />
            <el-link
              type="info"
              href="https://www.yaofangwang.com/yongyao/2022086.shtml"
              >参倍固肠胶囊在哪里买？参倍固肠胶囊为什么不容易买到？</el-link
            ><br /><br />
            <el-link
              type="info"
              href="https://www.yaofangwang.com/yongyao/2021191.shtml"
              >脾胃虚弱的人能吃参苓白术丸吗，参苓白术丸适用人群有哪些</el-link
            ><br /><br />
            <el-link
              type="info"
              href="https://www.yaofangwang.com/yongyao/2021666.shtml"
              >补益资生丸和参苓白术散区别,补益资生丸和参苓白术散能一起吃吗?</el-link
            ><br /><br />
            <el-link
              type="info"
              href="https://www.yaofangwang.com/yongyao/2015875.shtml"
              >肝功能正常吃益肝灵软胶囊有坏处吗？长期服用益肝灵软胶囊对肝有损伤吗？</el-link
            ><br /><br />
          </div>
          <news></news>
        </el-card>
      </el-container>
      <br /><br />
      <el-container style="width: 1100px; margin-left: 200px">
        <el-main
          style="
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            border: 1px solid #ccc;
            padding: 10px;
            background-color: white;
            height: 1600px;
          "
        >
          <router-view />
        </el-main>
      </el-container>
    </el-main>
    <el-footer style="height: 100px; background-color: #ff9933">
      <div style="margin-left: 40%">
        <br />
        <el-link>版权声明&nbsp;&nbsp;|&nbsp;&nbsp;</el-link>
        <el-link>关于书馆&nbsp;&nbsp;|&nbsp;&nbsp;</el-link>
        <el-link>支持我们&nbsp;&nbsp;|&nbsp;&nbsp;</el-link>
        <el-link>联系我们&nbsp;&nbsp;|&nbsp;&nbsp;</el-link>
        <br /><br />学校官网&nbsp;
        <el-link
          type="primary"
          style="font-size: 20px"
          href="https://www.jmu.edu.cn"
          >https://www.jmu.edu.cn/</el-link
        >
      </div>
    </el-footer>
  </el-container>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import store from "../../store/index.js";
const route = useRoute();
const router = useRouter();
const handleLogin = () => {
  router.push("/login");
};
const searchFlag = ref("1");
const content = ref("");
const handleSearch = () => {
  router.push({
    path: "/all",
    query: { content: content.value, flag: searchFlag.value },
  });
  if (route.path == "/all") {
    setTimeout(() => {
      history.go(0);
    }, 1000);
  }
};
const avatar =
  store.getters.UserInfo.UserInfo == undefined
    ? "api/uploads/default.jpg"
    : "api/uploads/" + JSON.parse(store.getters.UserInfo.UserInfo).avatar;
const baseUrl = "api/uploads/index/";
const imageList = [
  baseUrl + "1.jpg",
  baseUrl + "2.jpg",
  baseUrl + "3.jpg",
  baseUrl + "4.jpg",
];
</script>

<style lang="scss" scoped>
.avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.el-container {
  min-height: 40vh;
}

.el-col {
  padding: 0px !important;
}

.username {
  font-size: 15px;

  margin: 0 0 0 10px;
}
</style>
